<template>
  <div class="community">

    <el-card shadow="never">
      <div class="header">
        <div class="page-header">
          <el-page-header @back="goBack" content="社区" style="margin-bottom: 20px">
          </el-page-header>

        </div>
        <div style="font-size: 13px;padding-right: 30px"><span style="cursor: pointer;" @click="newest">最新 </span> | <span style="cursor: pointer" @click="hottest"> 最热</span></div>
      </div>
      <!--  如果没有登录  -->
      <div v-show="!isShow" style="padding: 20px;font-size: 20px">
        如需发表评论，请先登录平台
      </div>
      <!--  如果已经登录  -->
      <div class="comment" v-if="isShow">
        <div class="comment-img">
          <el-avatar :size="70" :src="user.userAvatar"></el-avatar>
        </div>
        <div class="comment-main">
          <el-input
              type="textarea"
              :rows="3"
              placeholder="期待你的发言"
              v-model="comment.remarkContent">
          </el-input>
        </div>
        <div class="comment-send">
          <el-button style="min-width: 100px;height: 100%;" type="primary" @click="addRemark">发布</el-button>
        </div>
      </div>

      <!--   分割线   -->
      <el-divider></el-divider>

      <div class="all-comment" >
        <div class="all-comment-index"  v-for="index in remark">
          <div style="width: 100%;display: flex;justify-content:flex-start;margin-bottom: 10px" v-if="index.user" >
            <div class="comment-img">
              <el-avatar :size="60" :src="index.user.userAvatar"></el-avatar>
            </div>
            <div class="all-comment-middle">
              <div class="user-info">{{index.user.realName}}</div>
              <div class="root-reply">
                <div class="root-reply-content">{{index.remarkContent}}</div>
                <div class="root-reply-like">
                  <div class="margin-right">{{leaveTime(index.remarkTime)}}</div>
                  <div class="margin-right" style="display: flex;align-items: center;cursor: pointer" @click="updateRemarkLike(index.remarkId)">

                    <svg  t="1675874267054"  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5675" width="12" height="12">
                      <path  :class="{svgColor:index.isLike}" d="M631.615776 204.927616c-4.543991 23.551956-8.895983 45.759914-7.999985 67.967872a52.671901 52.671901 0 0 0 52.735901 51.135904l222.271583-1.919996a116.991781 116.991781 0 0 1 117.31178 127.743761l-44.287917 468.287121A116.479782 116.479782 0 0 1 855.295356 1023.99808H124.416727a116.927781 116.927781 0 0 1-116.799781-116.799781V512.19104c0-64.447879 52.415902-116.863781 116.799781-116.863781h39.615925c56.063895 0 116.671781-11.135979 137.279743-36.031933 37.18393-44.863916 66.175876-102.271808 86.271838-170.49568 5.11999-17.407967 8.895983-35.263934 12.671977-52.991901l5.439989-25.279952c4.287992-20.735961 9.215983-44.223917 23.359957-65.023878A108.543796 108.543796 0 0 1 500.032022 1.535997 114.943784 114.943784 0 0 1 565.759899 10.239981c32.25594 14.527973 55.935895 44.223917 66.751875 83.583843 4.223992 15.359971 6.591988 31.99994 6.847987 49.535907 0.447999 19.839963-3.071994 37.50393-6.399988 54.591898M124.416727 459.391139a52.927901 52.927901 0 0 0-52.799901 52.863901v394.943259c0 29.119945 23.679956 52.799901 52.799901 52.799901h730.878629a52.479902 52.479902 0 0 0 52.543902-47.80791l44.287917-468.287122a52.351902 52.351902 0 0 0-13.567975-40.575924 52.159902 52.159902 0 0 0-38.975927-17.279968l-222.271583 1.919997a116.735781 116.735781 0 0 1-117.695779-112.703789c-1.087998-29.439945 4.159992-56.447894 9.215982-82.559845l1.343998-7.103987c2.943994-14.975972 5.50399-27.967948 5.18399-41.023923a132.671751 132.671751 0 0 0-4.607991-33.791937c-3.263994-12.031977-11.711978-33.343937-31.359941-42.239921a50.559905 50.559905 0 0 0-28.735946-3.903992 45.183915 45.183915 0 0 0-28.671947 16.895968c-7.039987 10.239981-10.175981 25.663952-13.631974 41.983921l-5.50399 25.599952c-4.095992 19.327964-8.319984 38.719927-13.887974 57.663892-22.527958 76.607856-55.679896 141.695734-98.367815 193.343638-44.287917 53.5039-142.079734 59.263889-182.015659 59.263889h-44.159917z" p-id="5676" fill="#9499A0"></path><path d="M208.960568 990.398143a31.99994 31.99994 0 0 1-31.99994-31.99994V460.991136a31.99994 31.99994 0 0 1 63.99988 0v497.407067a31.99994 31.99994 0 0 1-31.99994 31.99994z" p-id="5677" fill="#9499A0"></path>
                    </svg>
                    <span v-show="Number(index.remarkLikeNumber) !== 0">{{index.remarkLikeNumber}}</span>
                  </div>
                  <div class="margin-right" style="cursor: pointer" @click="openAddReply(index.remarkId,index.user.realName,index.user.userId)">回复</div>
                </div>
              </div>
            </div>
          </div>
          <!--     二级评论     -->
          <div class="reply" v-for="reply in index.remarkList">
            <div class="reply-index" v-if="reply.user" >
              <div class="reply-img">
                <el-avatar :size="60" :src="reply.user.userAvatar"></el-avatar>
              </div>
              <div class="reply-comment-middle">
                <div style="display: flex;">
                  <div class="replay-user-info">{{reply.user.realName}}</div>
                  <span style="color: #409EFF;margin-right: 2px">@{{reply.remarkTarget}}</span>
                  <div class="root-reply-content">:{{reply.remarkContent}}</div>
                </div>
                <div class="root-reply">
                  <div class="root-reply-like">
                    <div class="margin-right">{{leaveTime(reply.remarkTime)}}</div>
                    <div class="margin-right" style="display: flex;align-items: center;cursor: pointer" @click="updateRemarkLike(reply.remarkId)">
                      <svg  t="1675874267054"  class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5675" width="12" height="12">
                        <path  :class="{svgColor:reply.isLike}" d="M631.615776 204.927616c-4.543991 23.551956-8.895983 45.759914-7.999985 67.967872a52.671901 52.671901 0 0 0 52.735901 51.135904l222.271583-1.919996a116.991781 116.991781 0 0 1 117.31178 127.743761l-44.287917 468.287121A116.479782 116.479782 0 0 1 855.295356 1023.99808H124.416727a116.927781 116.927781 0 0 1-116.799781-116.799781V512.19104c0-64.447879 52.415902-116.863781 116.799781-116.863781h39.615925c56.063895 0 116.671781-11.135979 137.279743-36.031933 37.18393-44.863916 66.175876-102.271808 86.271838-170.49568 5.11999-17.407967 8.895983-35.263934 12.671977-52.991901l5.439989-25.279952c4.287992-20.735961 9.215983-44.223917 23.359957-65.023878A108.543796 108.543796 0 0 1 500.032022 1.535997 114.943784 114.943784 0 0 1 565.759899 10.239981c32.25594 14.527973 55.935895 44.223917 66.751875 83.583843 4.223992 15.359971 6.591988 31.99994 6.847987 49.535907 0.447999 19.839963-3.071994 37.50393-6.399988 54.591898M124.416727 459.391139a52.927901 52.927901 0 0 0-52.799901 52.863901v394.943259c0 29.119945 23.679956 52.799901 52.799901 52.799901h730.878629a52.479902 52.479902 0 0 0 52.543902-47.80791l44.287917-468.287122a52.351902 52.351902 0 0 0-13.567975-40.575924 52.159902 52.159902 0 0 0-38.975927-17.279968l-222.271583 1.919997a116.735781 116.735781 0 0 1-117.695779-112.703789c-1.087998-29.439945 4.159992-56.447894 9.215982-82.559845l1.343998-7.103987c2.943994-14.975972 5.50399-27.967948 5.18399-41.023923a132.671751 132.671751 0 0 0-4.607991-33.791937c-3.263994-12.031977-11.711978-33.343937-31.359941-42.239921a50.559905 50.559905 0 0 0-28.735946-3.903992 45.183915 45.183915 0 0 0-28.671947 16.895968c-7.039987 10.239981-10.175981 25.663952-13.631974 41.983921l-5.50399 25.599952c-4.095992 19.327964-8.319984 38.719927-13.887974 57.663892-22.527958 76.607856-55.679896 141.695734-98.367815 193.343638-44.287917 53.5039-142.079734 59.263889-182.015659 59.263889h-44.159917z" p-id="5676" fill="#9499A0"></path><path d="M208.960568 990.398143a31.99994 31.99994 0 0 1-31.99994-31.99994V460.991136a31.99994 31.99994 0 0 1 63.99988 0v497.407067a31.99994 31.99994 0 0 1-31.99994 31.99994z" p-id="5677" fill="#9499A0"></path>
                      </svg>
                      <span v-show="Number(reply.remarkLikeNumber) !== 0">{{reply.remarkLikeNumber}}</span>
                    </div>
                    <div class="margin-right" style="cursor: pointer" @click="openAddReply(index.remarkId,reply.user.realName,reply.user.userId)">回复</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <el-dialog
          title="回复"
          :visible.sync="centerDialogVisible"
          width="30%"
          center>
        <el-input
            type="textarea"
            :rows="3"
            placeholder="期待你的发言"
            v-model="commentReply.remarkContent">
        </el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addReply">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {useUser} from "@/store/userStore";
import {
  addRemark,
  addReply,
  getRemarkAll,
  getRemarkByLikeNumber,
  getRemarkByRemarkTime,
  updateRemarkLike
} from "@/api/allApi";
import {leaveTime} from "../../../utils/timeFormat";
import async from "async";

export default {
  data() {
    return {
      isShow:false,
      user:'',
      User:useUser(),
      textarea:'',
      remark:[],
      comment:{},
      commentReply:{},
      centerDialogVisible: false,
      isActivity:false,
    }
  },
  created() {
    this.user = JSON.parse(window.localStorage.getItem('access-user'))
  },
  watch:{
    "User.changeUserAvatar" : function (){
      this.user = JSON.parse(window.localStorage.getItem('access-user'))
    }
  },
  methods:{
    leaveTime,

    goBack() {
      this.$router.back();
    },
    toLogin() {
      // this.User.loginDialogVisible = true
    },
    addRemark() {
      this.comment.userId = this.user.userId
      addRemark(this.comment).then(res=>{
        if (res.data.success) {
          this.$message.success(res.data.data)
          this.comment = {}
          this.getRemarkAll()
        }else{
          this.$message.error(res.data.data)
        }
      })
    },
    openAddReply(remarkId,realName,remarkUserId) {
      if (!(this.user === null || this.user === '')) {
        this.centerDialogVisible = true
        this.commentReply.userId = this.user.userId
        this.commentReply.remarkTarget =  realName
        this.commentReply.remarkUserId = remarkUserId
        this.commentReply.remarkPid = remarkId
      }else {
        this.$message({
          showClose: true,
          message: '请先登录平台！',
          type: 'error'
        });
      }
    },
    addReply() {
        addReply(this.commentReply).then(res=>{
          if (res.data.success) {
            this.$message.success(res.data.data)
            this.centerDialogVisible = false
            this.getRemarkAll()
            this.commentReply={}
          }else {
            this.$message.error(res.data.data)
          }
        })
    },
    getRemarkAll() {
      if (this.user === null || this.user === '') {
         getRemarkAll(-1).then(res=>{
          if (res.data.success){
            this.remark = res.data.data
          }
        })
      }else {
        getRemarkAll(this.user.userId).then(res=>{
          if (res.data.success){
            this.remark = res.data.data
          }
        })
      }

    },
    updateRemarkLike(remarkId) {
      if (!(this.user === null || this.user === '')) {
        updateRemarkLike({
          remarkId:remarkId,
          userId:this.user.userId
        }).then(res=>{
          if (res.data.success) {
            this.getRemarkAll()
          }else {

          }
        })
      }else {
        this.$message({
          showClose: true,
          message: '请先登录平台！',
          type: 'error'
        });
      }
    },
    newest() {
      if (!(this.user === null || this.user === '')) {
        getRemarkByRemarkTime(this.user.userId).then(res=>{
          this.remark = {}
          this.remark = res.data.data
        })
      }else {
        getRemarkByRemarkTime(-1).then(res=>{
          this.remark = {}
          this.remark = res.data.data
        })
      }
      },
    hottest() {
      if (!(this.user === null || this.user === '')) {
        getRemarkByLikeNumber(this.user.userId).then(res => {
          this.remark = {}
          this.remark = res.data.data
        })
      }else {
        getRemarkByLikeNumber(-1).then(res => {
          this.remark = {}
          this.remark = res.data.data
        })
      }

    },
  },
  mounted() {
    this.getRemarkAll()
      if (this.user) {
        this.isShow = true
      }

  }
}
</script>

<style lang="less" scoped>
 .community {
   width: 80%;
   margin:30px auto;
   min-width: 900px;
   flex-wrap: wrap;
   border-radius: 5px;

   .header {
     display: flex;
     justify-content: space-between;
   }

   .comment {
     display: flex;
     justify-content: space-between;
     height: 90px;
     padding: 10px;

     .comment-img{
       width: 7%;
     }


     .comment-main {
       width:80%
     }

     .comment-send {
       width: 10%;
     }
   }

   .all-comment {

     margin-top: 20px;

     .all-comment-index {

       flex-wrap:nowrap;
       padding: 10px;

       .comment-img {
         margin-right: 15px;
       }

       .all-comment-middle {

         .root-reply-content {
           padding: 2px 0;
         }
       }

       .reply {
          display: flex;
          margin-left:70px ;
          padding: 10px 0;

         .reply-img {
           margin-right: 15px;
         }

         .replay-user-info {
           display:flex;
           align-items: center;
           font-weight: 700;
           color: #61666D;
           margin-right: 10px;
           font-size: 13px
         }
       }
     }

     .reply-index {
       display: flex;
       justify-content:flex-start;
       padding-bottom: 10px;

     }

     .user-info {
       font-size: 13px;
       margin: 4px 0;
       font-weight: 700;
     }

     .root-reply-like {
       display: flex;
       font-size: 13px;
       margin-top: 3px;
       color: #9499A0;
       .margin-right {
         margin-right: 20px;
       }
     }

   }

   .reply-textarea {
     display: flex;
     justify-content: flex-end;

   }


   .svgColor {
     fill: rgb(63, 139, 234);
   }



 }
</style>